<template>
	<view class="itu-p-20">
		<view class="itu-flex itu-flex-wrap itu-justify-between">
			<view
				class="itu-bg-blue animation-cell itu-animation-loop"
				:class="[item.isAnimation ? item.animation : '', isReverse ? 'itu-animation-reverse' : '']"
				@click="animation(index)"
				v-for="(item, index) in animationList"
				:key="index"
			>
				<view>{{ item.name }}</view>
				<view class="itu-text-xxs">{{ item.animation }}</view>
			</view>
			<view class="itu-item-title itu-mt-20">是否反向（itu-animation-reverse）</view>
		</view>
		<subsection :list="list" v-model="current" @change="handleChange"></subsection>
	</view>
</template>

<script>
export default {
	data() {
		return {
			animationList: [
				{ name: '淡出', animation: 'itu-animation-fade', isAnimation: false },
				{ name: '放大', animation: 'itu-animation-scale-up', isAnimation: false },
				{ name: '缩小', animation: 'itu-animation-scale-down', isAnimation: false },
				{ name: '顶部滑入', animation: 'itu-animation-slide-top', isAnimation: false },
				{ name: '底部滑入', animation: 'itu-animation-slide-bottom', isAnimation: false },
				{ name: '左边滑入', animation: 'itu-animation-slide-left', isAnimation: false },
				{ name: '右边滑入', animation: 'itu-animation-slide-right', isAnimation: false },
				{ name: '震动', animation: 'itu-animation-shake', isAnimation: false }
			],
			list: [
				{
					name: '正常动画'
				},
				{
					name: '反向动画'
				}
			],
			current: 0,
			isReverse: false
		};
	},
	onLoad({ title }) {
		this.setNavigationBarTitle(title);
	},
	methods: {
		animation(index) {
			this.$itu.setClipboardData(this.animationList[index].animation);
			this.animationList[index].isAnimation = true;
			setTimeout(() => {
				this.animationList[index].isAnimation = false;
			}, 1000);
		},
		handleChange(e) {
			this.isReverse = !!e;
		}
	}
};
</script>

<style lang="scss">
.animation-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 350rpx;
	height: 120rpx;
	margin-bottom: 10rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
}
</style>
